import React, { useEffect, useState } from 'react';
import './commendproductsdialog.css'
import icon_close from '@/assets/icon_close.png'
import { Mask } from 'antd-mobile';
import CommendProducts from '../CommendProducts/CommendProducts';

export default function CommendProductsDialog({ visible, onClose }) {

    const [needDisplay, setNeedDisplay] = useState(false);

    //监听
    // useEffect(() => {
    //     setAddToHome(isHomeMode)
    //     setNeedDisplay(visible)
    // }, [])

    //监听
    useEffect(() => {
        setNeedDisplay(visible)
    }, [visible])


    return (
        <Mask visible={needDisplay} opacity={0.6}
            onMaskClick={() => { }}>
            <div className="commendProductsDialogOverlayBg">
                <div className="commendProductsDialogOverlayContent">
                    <div className="commendProductsDialogOverlayContentRowHeaderCenter">
                        <span className='commendProductsDialogOverlayContentTitle'>Commend Products</span>
                        <img className="commendProductsDialogOverlayIconClose" src={icon_close} alt="" onClick={() => { onClose() }} />
                    </div>

                    {/* 推荐的产品列表 */}
                    <CommendProducts />

                </div>
            </div>
        </Mask >
    );
};
